<template>
    <div class="merchandise-management views-container">
    <div class="wlm-table">
         <div class="wlm-table-hearder-btn" >
             <el-button size="small" type="primary" @click="addtobtn">添加票务平台</el-button>
         </div>
         <el-dialog @close="resetDialogFormData({ type: '', url: '', name: '', cust_id: '',apikey:'',parkCode:''})" :visible.sync="dialogFormVisible"
          custom-class="reset-pwd wlm-form-dialog dialog-table" width="900px">
            <div  class="wlm-form" v-if="dialogFormVisible">
              <div class="wlm-form-header wlm-dialog-fixheader">
                <span class="wlm-dialog-inlenr">{{`${!!formFormatData.api['editForm']['params']['id']?'编辑':'添加'}票务平台`}}</span>
            </div>

            
             <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="wlm-form-content">
          <div class="wlm-dialog-main">
            <div class="wlm-dialog-content">
              <el-form  :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules"  size="small" label-width="100px" class="retail-form" label-position="right">
              <el-form-item label="门票类型" prop="type">
                   <el-select v-model.trim="formFormatData.formData.type" placeholder="请选择" style="width:200px;">
                            <el-option :label="'自我游'" :value="1">
                            </el-option>
                              <el-option :label="'天时同城'" :value="2">
                            </el-option>
                            <el-option :label="'银科环企'" :value="3">
                            </el-option>
                              <el-option :label="'票付通'" :value="4">
                            </el-option>
                        </el-select>
              </el-form-item>
              <el-form-item :label="formFormatData.formData.type==3?'OTA密钥':formFormatData.formData.type==4?'密码':'apikey'" prop="apikey">
                  <el-input placeholder="请输入内容" v-model.trim="formFormatData.formData.apikey"></el-input>
              </el-form-item>
              <!-- 'cust_id' -->
              <el-form-item :label="formFormatData.formData.type==3?'OTA编码':formFormatData.formData.type==4?'账号':'cust_id'" prop="cust_id">
                 <el-input placeholder="请输入内容" v-model.trim="formFormatData.formData.cust_id"></el-input>
              </el-form-item>
              <el-form-item label="url" prop="url">
                 <el-input placeholder="请输入内容" v-model.trim="formFormatData.formData.url"></el-input>
              </el-form-item>
             <el-form-item label="绑定商家" prop="name">
                  <el-input placeholder="请输入内容" v-model.trim="formFormatData.formData.name"></el-input>
              </el-form-item>
                <el-form-item label="OTA景区编码" prop="parkCode" v-if="formFormatData.formData.type==3">
                  <el-input placeholder="请输入内容" v-model.trim="formFormatData.formData.parkCode"></el-input>
              </el-form-item>
              <div v-if="formFormatData.api['editForm']['params']['id']">
                 <div v-if="formFormatData.formData.type==1">
                      <el-form-item label="订单通知核销地址" prop="sort_name">
                   <el-input v-model="notifyVerifyOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
              <el-form-item label="订单出票通知地址" prop="sort_name">
                 <el-input v-model="notifyNotice" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
              <el-form-item label="订单确认通知地址" prop="sort_name">
                <el-input v-model="notifyConfirmOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
              <el-form-item label="订单取消通知地址" prop="sort_name">
                <el-input v-model="notifyCancelOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
              <el-form-item label="订单退改申请通知地址" prop="sort_name">
                   <el-input v-model="notifyRefundOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
                 </div>
              <el-form-item label="订单通知核销地址" prop="sort_name" v-if="formFormatData.formData.type==2">
                   <el-input v-model="notifyValidateOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
               <el-form-item label="订单通知核销地址" prop="sort_name" v-if="formFormatData.formData.type==3">
                   <el-input v-model="notifyOtaValidateOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
              <el-form-item label="订单退款通知地址" prop="sort_name" v-if="formFormatData.formData.type==3">
                   <el-input v-model="notifyOtaRefundOrder" :disabled="true" style="margin-left:20px;width:600px;"></el-input>
              </el-form-item>
                <el-form-item label="通知地址" prop="sort_name" v-if="formFormatData.formData.type==4">
                   <el-input v-model="notifyPft" :disabled="true" style="width:600px;"></el-input>
              </el-form-item>
              </div>
            
            </el-form>
            </div>
          </div>
        </div>
             </el-scrollbar>
            </div>
            <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
                <!-- @click="formFormatSubmit" -->
              <el-button size="small"  @click="formFormatSubmit" type="primary">保存</el-button>
            </footer>
        </el-dialog>
         <div class="wlm-table-content">
              <el-table style="width:100%" :ref="tableFormatData.ticketing.key"
                    :data="tableFormatData.ticketing.tableData"
                    @selection-change="handleSelectionChange">
                <el-table-column  prop="avatarUrl" label="票务平台">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type==1">自我游</span>
                        <span v-if="scope.row.type==2">天时同城</span>
                        <span v-if="scope.row.type==3">银科环企</span>
                        <span v-if="scope.row.type==4">票付通</span>
                    </template>
                </el-table-column>
                 <el-table-column  prop="avatarUrl" label="添加时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.create_time}}</span>
                    </template>
                </el-table-column>
                 <el-table-column  prop="avatarUrl" label="绑定商家">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                 <el-table-column  prop="avatarUrl" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showdialog(scope.row.id,scope.row.type)">编辑</el-button>
                        <el-button type="danger" size="mini"  @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.ticketing.pagination.page"
            :page-sizes="tableFormatData.ticketing.pagination.pagesizes"
            :page-size.sync="tableFormatData.ticketing.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.ticketing.pagination.total : 0"
          >
          </el-pagination>
        </div>
         </div>
    </div>
    </div>
</template>
<script>
import {ticketGet,ticketSave,ticketDetail,ticketDelete,CallbackUrl} from '@/api/cloudservice'
import mixins from '@/mixins/mixins'
import clipboard from '@/utils/clipboard'
export default {
    mixins: [mixins.getters('Table'),mixins.getters('Form')],
    name:'ticketing',
    data(){
        return{
            dialogFormVisible:false,
                notifyCancelOrder:'',
                notifyConfirmOrder:'',
                notifyNotice:'',
                notifyRefundOrder:'',
                notifyVerifyOrder:'',
                notifyValidateOrder:'',
                notifyOtaRefundOrder:'',
                notifyPft:'',
                notifyOtaValidateOrder:'',
            formFormatData: {
                key: 'ticketing',
                model: {
                noCreateEdit: false,
                bindDialog: 'dialogFormVisible'
                },
                api: {
                editForm: {// 编辑回填
                    api: ticketDetail,
                    params: {
                    id: ''
                    },
                    redirect: 'id'
                },
                submitForm: ticketSave,
                },
                formData: {
                    type:'',
                    url:'',
                    name:'',
                    cust_id:'',
                    apikey:'',
                    notice:'',
                    parkCode:'',
                },
                rules: {
                type: [{
                    message: '请选择门票类型',
                    required: true,
                    trigger: 'change'
                }],
                apikey:[{
                      message: '请填写apikey',
                    required: true,
                    trigger: 'change'
                }],
                cust_id:[{
                     message: '请填写商家编号',
                    required: true,
                    trigger: 'change'
                }],
                url:[{
                   message: '请填写url',
                    required: true,
                    trigger: 'change' 
                }],
                name:[{
                    message: '请填写商家',
                    required: true,
                    trigger: 'change' 
                }],
                 parkCode:[{
                    message: '请填写景区编码',
                    required: true,
                    trigger: 'change' 
                }]
                }
            },
            tableFormatData: {
                current: 'ticketing',
                ticketing: {
                key: 'ticketing',
                api: {
                    getList: ticketGet
                },
                tableData: [],
                files: {
                    ids: [],
                    checkall: '0',
                    live_state: 'all',
                    id:'',
                },
                pagination: {
                    page: 1,
                    list_rows: 10,
                    pagesizes: [10, 20, 50],
                    total: 0
                }
                }
            }
        }
    },
    methods:{
        addtobtn(){
            this.dialogFormVisible=true
            CallbackUrl().then(res=>{
                console.log("66666",res)
                // this.notifyVerifyOrder = res.data.data.notifyVerifyOrder
                // this.notifyNotice = res.data.data.notifyNotice
                // this.notifyConfirmOrder = res.data.data.notifyConfirmOrder
                // this.notifyCancelOrder = res.data.data.notifyCancelOrder
                // this.notifyRefundOrder = res.data.data.notifyRefundOrder
            })
        },
        showdialog(params,type) {
            this.formFormatDialogEditEvt({id:params,toggle:'dialogFormVisible'})
                    // ticketDetail({id:params}).then(res=>{
                    //     this.formFormatData.formData = res.data.data
                    // })
                CallbackUrl({type:type}).then(res=>{
              
               
                
                this.notifyVerifyOrder = res.data.data.notifyVerifyOrder
                this.notifyNotice = res.data.data.notifyNotice
                this.notifyConfirmOrder = res.data.data.notifyConfirmOrder
                this.notifyCancelOrder = res.data.data.notifyCancelOrder
                this.notifyRefundOrder = res.data.data.notifyRefundOrder
                this.notifyValidateOrder=res.data.data.notifyValidateOrder
                this.notifyOtaRefundOrder =res.data.data.notifyOtaRefundOrder//退款通知地址
                this.notifyOtaValidateOrder=res.data.data.notifyOtaValidateOrder//核销通知地址
                this.notifyPft =res.data.data.notifyPft//通知地址
            })
            },
            handleDelete(index) { // 删除
                this.$confirm('此操作将删除此行数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ticketDelete({ id: index }).then(res => {
                    const { code } = res.data
                    code == 1 && this.$message.success('操作成功')
                    this.filesSerch()
                    })
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                    })
                })
                },
            },
}
</script>
